﻿var FrameDisplay = {};

FrameDisplay.baseUrl = null;
FrameDisplay.accessCode = null;
FrameDisplay.instance = null;

FrameDisplay.startTouch = null;
FrameDisplay.lastTouch = null;


FrameDisplay.handleTouchStart = function(e) {
    if (FrameDisplay.instance) {
        var touch = e.touches[0];
        // If this is on mouseWatchPadImg, prevent browser dragging.
        if (FrameDisplay.instance.mouseWatchPadImg == touch.target) {
            e.preventDefault();
            var now = new Date().getTime();
            FrameDisplay.startTouch = { pageX: touch.pageX, pageY: touch.pageY, time: now };
            FrameDisplay.lastTouch = { pageX: touch.pageX, pageY: touch.pageY, time: now };
            FrameDisplay.touchMoveCount = 0;
        }
    }
};

FrameDisplay.handleTouchMove = function(e) {
    if (FrameDisplay.startTouch != null) {
        e.preventDefault();

        var eventTouch = e.touches[0];
        var touch = { pageX: eventTouch.pageX, pageY: eventTouch.pageY, time: new Date().getTime() };

        var deltaX = touch.pageX - FrameDisplay.lastTouch.pageX;
        var deltaY = touch.pageY - FrameDisplay.lastTouch.pageY;

        FrameDisplay.Services.InputControl.moveMouse(deltaX, deltaY, false);

        FrameDisplay.lastTouch = touch;

        FrameDisplay.touchMoveCount++;
    }
};

FrameDisplay.handleTouchEnd = function(e) {
    e.preventDefault();

    if (FrameDisplay.startTouch != null) {
        FrameDisplay.startTouch = null;

        var now = new Date().getTime();
    }
};

YAHOO.util.Event.addListener(window, "load",
    function() {
        document.body.ontouchstart = FrameDisplay.handleTouchStart;
        document.body.ontouchmove = FrameDisplay.handleTouchMove;
        document.body.ontouchend = FrameDisplay.handleTouchEnd;
    }
);



FrameDisplay.MouseWatchPad = function() {
    FrameDisplay.instance = this;
};

FrameDisplay.MouseWatchPad.prototype.init = function() {
    var self = this;

    // mouse watch pad area.
    var mouseWatchPadImg = document.createElement('img');
    this.mouseWatchPadImg = mouseWatchPadImg;
    mouseWatchPadImg.style.width = '300px';
    mouseWatchPadImg.style.height = '200px';

    mouseWatchPadImg.onclick = function(event) {
        self.handleMouseClickOnMouseWatchPadImg(event);
    };

    document.body.appendChild(mouseWatchPadImg);

    var buttonDiv = document.createElement("div");
    this.buttonDiv = buttonDiv;

    // buttons    
    var leftMouseButtonDiv = document.createElement("div");
    leftMouseButtonDiv.style.cssFloat = 'left';
    leftMouseButtonDiv.style.width = '40%';
    leftMouseButtonDiv.style.height = '40px';
    leftMouseButtonDiv.style.backgroundColor = '#ddd';
    leftMouseButtonDiv.style.border = 'solid 1px #ccc';
    leftMouseButtonDiv.style.textAlign = 'center';
    leftMouseButtonDiv.innerHTML = 'L';
    leftMouseButtonDiv.onmousedown = function() { self.handleMouseDown('Left'); };
    leftMouseButtonDiv.onmouseup = function() { self.handleMouseUp('Left'); };
    buttonDiv.appendChild(leftMouseButtonDiv);

    var rightMouseButtonDiv = document.createElement("div");
    rightMouseButtonDiv.style.cssFloat = 'right';
    rightMouseButtonDiv.style.width = '40%';
    rightMouseButtonDiv.style.height = '40px';
    rightMouseButtonDiv.style.backgroundColor = '#ddd';
    rightMouseButtonDiv.style.border = 'solid 1px #ccc';
    rightMouseButtonDiv.style.textAlign = 'center';
    rightMouseButtonDiv.innerHTML = 'R';
    rightMouseButtonDiv.onmousedown = function() { self.handleMouseDown('Right'); };
    rightMouseButtonDiv.onmouseup = function() { self.handleMouseUp('Right'); };
    buttonDiv.appendChild(rightMouseButtonDiv);

    document.body.appendChild(buttonDiv);

    var debugDiv = document.createElement('div');
    this.debugDiv = debugDiv;
    debugDiv.style.clear = 'both';
    document.body.appendChild(debugDiv);

    this.resizeToFill();

    YAHOO.util.Event.addListener(window, "resize",
        function() { self.resizeToFill(); }
    );

    // periodically update view around cursor.
    setInterval(
        function() {
            self.updateBackground();
        },
        1000);
};


FrameDisplay.MouseWatchPad.prototype.resizeToFill = function() {
    var viewport = YAHOO.util.Dom.getClientRegion();
    var viewportWidth = viewport.right - viewport.left;
    var viewportHeight = viewport.bottom - viewport.top;

    this.mouseWatchPadImg.style.width = '' + viewportWidth + 'px';
    this.buttonDiv.style.width = '' + viewportWidth + 'px';
};


FrameDisplay.MouseWatchPad.prototype.updateBackground = function() {
    var backgroundUrl = FrameDisplay.baseUrl + 'FrameDisplayService/GetImageForCursorRegion?k=' + FrameDisplay.accessCode;

    var t = new Date().getTime();

    var mousePadImgRegion = YAHOO.util.Dom.getRegion(this.mouseWatchPadImg);
    var clientWidth = mousePadImgRegion.right - mousePadImgRegion.left;
    var clientHeight = mousePadImgRegion.bottom - mousePadImgRegion.top;

    var backgroundImage = backgroundUrl + '&w=' + clientWidth + '&h=' + clientHeight + '&t=' + t;
    this.mouseWatchPadImg.src = backgroundImage;
};


FrameDisplay.MouseWatchPad.prototype.handleMouseClickOnMouseWatchPadImg = function(event) {
    var mousePadImgRegion = YAHOO.util.Dom.getRegion(this.mouseWatchPadImg);
    var x = event.offsetX ? (event.offsetX) : event.pageX - mousePadImgRegion.left;
    var y = event.offsetY ? (event.offsetY) : event.pageY - mousePadImgRegion.top;

    var deltaX = x - (this.mouseWatchPadImg.clientWidth / 2);
    var deltaY = y - (this.mouseWatchPadImg.clientHeight / 2);
    
    FrameDisplay.Services.InputControl.moveMouse(deltaX, deltaY, true);
};


FrameDisplay.MouseWatchPad.prototype.handleMouseDown = function(button) {
    var mousePressUrl = FrameDisplay.baseUrl + '/FrameDisplayService/MousePress?k=' + FrameDisplay.accessCode + '&b=' + button + '&a=Down';
    FrameDisplay.ajaxGet(mousePressUrl);
}

FrameDisplay.MouseWatchPad.prototype.handleMouseUp = function(button) {
    var mousePressUrl = FrameDisplay.baseUrl + '/FrameDisplayService/MousePress?k=' + FrameDisplay.accessCode + '&b=' + button + '&a=Up';
    FrameDisplay.ajaxGet(mousePressUrl);
}


FrameDisplay.ajaxGet = function(url) {
    if (window.XMLHttpRequest) { var xmlhttp = new XMLHttpRequest(); } else { var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); }
    xmlhttp.open('GET', url, false);
    xmlhttp.send(null);
}


function handleKey(event) {
    if (event.charCode) { var keys = String.fromCharCode(event.charCode); } else { var keys = ''; }

    if (event.keyCode == 8) { keys += '{BKSP}'; }
    if (event.keyCode == 9) { keys += '{TAB}'; }
    if (event.keyCode == 13) { keys += '{ENTER}'; }
    if (event.keyCode == 37) { keys += '{LEFT}'; }
    if (event.keyCode == 38) { keys += '{UP}'; }
    if (event.keyCode == 39) { keys += '{RIGHT}'; }
    if (event.keyCode == 40) { keys += '{DOWN}'; }
    if (event.keyCode == 45) { keys += '{INS}'; }
    if (event.keyCode == 46) { keys += '{DEL}'; }

    if (event.altKey) { keys = '%' + keys; }
    if (event.shiftKey) { keys = '+' + keys; }
    if (event.ctrkley) { keys = '^' + keys; }

    var sendKeysUrl = FrameDisplay.baseUrl + '/FrameDisplayService/SendKeys?k=' + FrameDisplay.accessCode + '&keys=' + encodeURIComponent(keys);
    FrameDisplay.ajaxGet(sendKeysUrl);
    
    return false;
}


